<template>
  <div>
    <component-api class="mt0" :items="radioProps" :descriptions="radio.propsDescs" title="Props"></component-api>
    <component-api :items="radio.slots" title="Slots"></component-api>
    <component-api :items="radioEvents" title="Events"></component-api>
  </div>
</template>

<script>
  import WRadio from "../../../../../src/components/radio/WRadio.vue";
  const radio = {
    propsDescs: {
      value:
        '<strong class="error"><code>model-value</code> in Vue 3.</strong><br>Provide a boolean to dictate the selected state of the radio button.<br>This value gets updated when using a v-model.',
      returnValue:
        "Since the native HTML radio uses the <code>value</code> attribute to define the selected state, the <code>return-value</code> prop let you specify a value to return to the <code>v-model</code> when the radio is selected (instead of returning <code>true</code>).",
      label: "Sets a visible label for the radio button.",
      labelOnLeft:
        "Moves the label to the left of the radio button. By default the label is displayed on the right.",
      color:
        'Applies a color to the radio button when active. Accepts all the color names of the color palette, status colors, or custom colors (learn more about the colors in the <a href="/colors">colors</a> knowledge base page).<br>Providing a color hex, rgb(a) or hsl(a) will not work.',
      noRipple: "Removes the ripple animation on select.",
      name:
        "Provide a native HTML <code>name</code> attribute to the radio button. If not provided, a unique name will be computed.",
      disabled:
        "Disables the radio button making it unreactive to user interactions.",
      readonly:
        "The radio button will still look like an interactive radio button except that it is read-only: its current value cannot be changed by user interaction.",
      required:
        "Applies the native HTML <code>required</code> attribute to the radio button.",
      validators:
        '<span class="deep-orange">Only for validation, when this radio button is wrapped into a <strong class="code">w-form</strong></span>.<br>An array of functions determining the validity of the radio button. Each function will be executed on radio button validation and should return true when valid, or a string containing an error message when invalid. When one of the validators fails, the returned error message will appear underneath the radio button.',
    },
    slots: {
      default: { description: "The radio button label content." },
    },
    events: {
      input: {
        description:
          "Emitted each time the state of the radio button changes.<br>Updates the v-model value in Vue 2.x only.",
        params: {
          "[Boolean]": "The current state of the radio button.",
        },
      },
      "update:modelValue": {
        description:
          "Emitted each time the state of the radio button changes.<br>Updates the v-model value in Vue 3 only.",
        params: {
          "[Boolean]": "The current state of the radio button.",
        },
      },
      focus: {
        description: "Emitted on each radio button focus.",
        params: {
          "[DOM event object]": "The associated focus DOM event.",
        },
      },
    },
  };

  export default {
    data: () => ({
      radio,
    }),

    computed: {
      // Reads all the props and events directly from the component, so that as soon as a new prop or event
      // is added it will appear even if no description is yet provided.
      radioProps() {
        return WRadio.props;
      },
      radioEvents() {
        return WRadio.emits.reduce(
          (obj, label) => (obj[label] = radio.events[label] || {}) && obj,
          {}
        );
      },
    },
  };
</script>